



<template>
    <div>
        <div class="BtnDiv">
            <button class="loginBtn">我要登陆</button>
        </div>
        <div >
            <p class="msg">新用户注册</p>
        </div>
        <div class="eee">
            <loginPut ref="One" img="login_icon_phone.png" plaStr = "请输入手机号"></loginPut>
             <loginPut ref="two" img="login_icon_password.png" plaStr = "请输入密码" password="password"></loginPut>
            <loginPut ref="three" img="login_icon_password.png" plaStr = "请确认密码" password="password"></loginPut>
            <button class="registBtnBottom" @click="LoginClick">登陆</button>
        </div>

    </div>
</template>


<script>

import logiPut from './logiPut.vue'
import LoginPut from './logiPut'

export default{

components:{
    LoginPut
},
  data(){
  return{

  }
  },
  mounted () {
  },
  methods:{

      LoginClick()
      {
          if(this.$refs.One.Text&&this.$refs.two.Text&&this.$refs.three.Text)
          {
              console.log("deng路");
          }else
          {
              console.log("失败");
          }

        //   console.log(this.$refs.One.Text);

      },
  }
}



</script>


<style scoped>
.BtnDiv{

    background-color: burlywood;
    display: flex;
    flex-direction: row-reverse;

}
.loginBtn{
    height: 44px;
    width: 100px;
    background-color: red;;
    border: none;
    text-align: right;
}
.msg{
    padding-top: 37px;
    padding-bottom: 30px;
    font: 24px;
    font-weight: bold;
    color: #333333;

}
.eee
{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.registBtnBottom
{

margin-top: 60px;
border: none;

width: 80%;
height: 40px;
background-color: coral;
border-radius: 20px;
color: cornsilk;
font-size: 20px;
}

</style>
